<style>
  tr.actived{
    background: #eee;
  }
</style>
<template>
  <main>
    <div class="tile is-ancestor">
      <div class="tile is-parent is-8">
        <div class="tile is-ancestor">
          <div class="tile is-parent">
            <article class="tile is-child">
              <h4 class="title text-left">咨询列表</h4>
              <table class="table">
                <thead>
                <tr>
                  <th>名称</th>
                  <th>类型</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in list" :class="{'actived':item.id == id}" @click="getModify(item.id)">
                  <td>{{item.name}}</td>
                  <td>{{types[item.categoryId]}}</td>
                  <td class="is-icon">
                    <div class="btn-group">
                      <span @click.stop="modify(item.id)" class="btn">
                        编辑
                      </span>
                      <span @click.stop="deletes(item.id)" class="btn">
                        删除
                      </span>
                    </div>
                  </td>
                </tr>
                </tbody>
              </table>
            </article>
          </div>
        </div>
      </div>
      <div class="tile is-parent is-4" style="height: 200px;border-left: 1px solid #dfdfdf">
        <article class="tile is-child">
          <div class="block">
            <p class="title is-5 text-left">产品添加/编辑</p>
          </div>
          <div class="block">
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">标题</label>
              </div>
              <div class="control">
                <div class="control is-fullwidth">
                  <input class="input" v-model="param.name" type="text">
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">排序</label>
              </div>
              <div class="control">
                <div class="control is-fullwidth">
                  <input class="input" v-model="param.displayOrder" type="text">
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">激活</label>
              </div>
              <div class="control">
                <div class="control is-fullwidth">
                  <input v-model="param.enabled" type="checkbox">
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">所属类型</label>
              </div>
              <div class="control">
                <div class="select is-fullwidth">
                  <select v-model="param.categoryId">
                    <option v-for="it in classList" :value="it.id">{{it.name}}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label"></label>
              </div>
              <div class="control">
                <button class="button is-primary" @click="add">添加</button>
                <button style="margin-left: 10px" class="button" @click="toModify">修改</button>
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>
  </main>
</template>

<script>
  import { Modal } from 'vue-bulma-modal'
  import Vue from 'vue'
  import Message from 'vue-bulma-message'

  const MessageComponent = Vue.extend(Message)

  const openMessage = (propsData = {
    title: '',
    message: '',
    type: '',
    direction: '',
    duration: 1500,
    container: '.messages'
  }) => {
    return new MessageComponent({
      el: document.createElement('div'),
      propsData
    })
  }
  export default {
    data () {
      return {
        list:[
        ],
        param:{
          "author": "",
          "categoryId": 0,
          "content": "",
          "createdDate": "",
          "description": "",
          "displayOrder": 0,
          "enabled": true,
          "image": "",
          "keywords": "",
          "langKey": "",
          "name": "",
          "source": "",
          "viceTitle": "",
          "visits": 0
        },
        id:'',
        typesParam:{name:'Karyn Holmberg',type:'Drums'},
        classList:[],
        types:{}
      }
    },
    methods: {
      getList () {
        let vm = this
        vm.$http.get('information/api/information',{}).then(function(res) {
          vm.list = res.data
        })
      },
      add () {
        let vm = this
        this.$http.post('information/api/information',vm.param).then(function (res) {
          vm.openMessageWithType('primary')
        })
      },
      openMessageWithType (type) {
        openMessage({
          title: '提示',
          message: '操作成功',
          type: type
        })
      },
      getClass () {
        let vm = this
        this.$http.get('classification/api/categories',{}).then(function(res){
          let data = {}
          for(let i = 0; i < res.data.length; i++){
            data[res.data[i].id] = res.data[i].name
          }
          vm.types = data
          vm.classList = res.data
        })
      },
      modify (id) {
        this.$router.push({path:'/detail',query:{id:id}})
      },
      getModify (id) {
        let vm = this
        vm.id = id
        this.$http.get('product/api/products/'+id,{}).then(function(res){
          for(let key in vm.param){
            vm.param[key] = res.data[key]
          }
        })
      },
      toModify () {
        let vm = this
        let param = Object.assign({id:vm.id},vm.param)
        this.$http.put('product/api/products',param).then(function(res){
          openMessage({
            title: '提示',
            message: '修改成功',
            type: 'primary'
          })
          vm.getList()
        })
      },
      deletes (id) {
        let vm = this
        this.$http.delete('product/api/products/'+id,{}).then(function(res){
          openMessage({
            title: '提示',
            message: '删除成功',
            type: 'primary'
          })
          vm.getList()
        })
      },
      addType () {
        let vm = this
        let arr = {
          name:vm.typesParam.name,
          type:vm.typesParam.type
        }
        vm.types.push(arr)
      },
      modifyType (id,type) {
        this.$router.push({path:'/detail',query:{type:type,id:id}})
      },
      deletesType (i) {
        let vm = this
        vm.types.splice(i,1)
      }
    },
    computed: Object.assign({}),
    components: { Modal },
    mounted () {
      this.$parent.$parent.$refs.nav.status = false
      this.getClass()
      this.getList()
    }
  }
</script>
